
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图文展示页面</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .carousel-item {
            height: 32rem;
            background-color: #777;
        }
        .carousel-caption {
            background: rgba(0,0,0,0.5);
            border-radius: 0.5rem;
        }
        .article-card {
            transition: transform 0.3s ease;
            height: 100%;
        }
        .article-card:hover {
            transform: translateY(-5px);
        }
        .article-img {
            height: 200px;
            object-fit: cover;
        }
        @media (max-width: 768px) {
            .carousel-item {
                height: 20rem;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <div class="row g-4">
            <!-- 左侧轮播图 -->
            <div class="col-8">
                <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
                    <!-- 轮播指示器 -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
                    </div>

                    <!-- 轮播内容 -->
                    <div class="carousel-inner rounded-3">
                        <div class="carousel-item active">
                            <img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="自然风景山水画面">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>自然风光</h5>
                                <p>壮丽的山川与清澈的湖泊相映成趣</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="现代城市建筑天际线">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>城市景观</h5>
                                <p>现代化都市建筑的宏伟风貌</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt科技数码产品展示">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>科技产品</h5>
                                <p>最新数码设备的创新设计</p>
                            </div>
                        </div>
                    </div>

                    <!-- 轮播控制按钮 -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                        <span class="visually-hidden">上一张</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                        <span class="visually-hidden">下一张</span>
                    </button>
                </div>
            </div>

            <!-- 右侧图文展示区域 -->
            <div class="col-4">
                <div class="row g-4 h-100">
                    <!-- 上方文章 -->
                    <div class="col-12">
                        <div class="card article-card shadow-sm border-0">
                            <img src="https://picsum.photos/400/200?random=4" class="card-img-top article-img" alt="编程开发工作环境设置">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fas fa-code me-2 text-primary"></i>
                                    Bootstrap 5 开发指南
                                </h5>
                                <p class="card-text text-muted">Bootstrap 5 是最流行的前端框架，用于开发响应式、移动优先的网站...</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        <i class="far fa-clock me-1"></i>
                                        2025年10月29日
                                    </small>
                                    <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 下方文章 -->
                    <div class="col-12">
                        <div class="card article-card shadow-sm border-0">
                            <img src="https://picsum.photos/400/200?random=5" class="card-img-top article-img" alt="网页设计创意布局构思">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fas fa-palette me-2 text-success"></i>
                                    现代网页设计趋势
                                </h5>
                                <p class="card-text text-muted">探索最新的网页设计趋势，包括微交互、玻璃拟态和3D元素的应用...</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        <i class="far fa-clock me-1"></i>
                                        2025年10月25日
                                    </small>
                                    <a href="#" class="btn btn-sm btn-outline-success">阅读全文</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
